<template>
  <div class="pinia">
    <div class="counter">
      <div class="title">Pinia</div>
      当前数量：{{ count }}
      <!-- <t-button style="margin-top: 10px" @click="accumulate">累加</t-button> -->
      {{ counter.count }}
      <van-button type="primary" @click="counter.increment">主要按钮</van-button>
      <div>{{ counter.doubleCount }}</div>

      <div class="title">elementPlus</div>
      <el-checkbox v-model="checked1" label="Option 1" size="large" />
      <el-checkbox v-model="checked2" label="Option 2" size="large" />

      <div class="title">图标</div>
      <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24">
        <path
          fill="currentColor"
          d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-7 15.5h-1.5V14h-1v3H8v-3H7v4.5H5.5v-5c0-.55.45-1 1-1H11c.55 0 1 .45 1 1zm3.5 0H14v-6h3.5c.55 0 1 .45 1 1V16c0 .55-.45 1-1 1h-2zM10 5.5v6H8.5V7H7V5.5zm6.5 5c0 .55-.45 1-1 1H12V10h3V9h-2V8h2V7h-3V5.5h3.5c.55 0 1 .45 1 1zm-1 3.5H17v1.5h-1.5z"
        ></path>
      </svg>
    </div>
  </div>
</template>

<script setup>
import { useCounter } from '../store/other';
const counter = useCounter();
console.log(counter);
onMounted(() => {
  counter.getList();
});
</script>

<style scoped lang="scss">
.pinia {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  .counter {
    display: flex;
    flex-direction: column;
    font-size: 18px;
    line-height: 30px;
  }

  .title {
    font-size: 30px;
    margin-bottom: 10px;
    background-color: #ff5a5a;
  }
}
</style>
